<template>
	<view>
		<view class="headerbox" :style="{'z-index':top==true?'99999999':'1'}">
			<view class="searchbox">
				<view class="search">
					<!-- <view class="scan">
						<image src="../../static/sao.png"></image>
					</view> -->
					<view class="inputbox">
						<input placeholder="搜索" v-model="keyword" />
					</view>
					<view class="searchbut" @click="tosearch()">搜索</view>
				</view>
			</view>
			<view class="navtip">
				<view class="tipbox" v-for="(item,index) in tiplist" :key="index" @click="changeindex(item,index)">
					<view>{{item.title}}</view>
					<image v-if="index==currone" :src="item.imged"></image>
					<image v-else :src="item.img"></image>
				</view>
			</view>
		</view>
		
		<!-- 顶部弹窗 -->
		<!-- <uni-popup ref="popup" type="top" background-color="#fff">
			<view class="tiptype">
				<view class="boxitem">
					<view class="itembox" v-for="(item,index) in tiptypelist" :key="index"
					@click="changebx(item,index)" :style="{'color':index==bx?'#F94D29':'','border':index==bx?'2rpx solid #F94D29':''}">
						{{item}}
					</view>
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="popups" type="right" >
			<view class="rightbox">
				<screen :childCate="childCate" @filterdata="filterdata"></screen>
			</view>
		</uni-popup>
		<view style="height: 220rpx;"></view>
		<goods :list="list" @togoodsinfo="togoodsinfo"></goods>
		<kong v-if="list.length==0"></kong>
	</view>
</template>

<script>
	import goods from '../../components/goods.vue'
	import screen from '../../components/screen.vue'
	import kong from '../../components/kong.vue'
	export default {
		components:{
			screen,goods,kong
		},
		data() {
			return {
				tiplist:[{img:'../../static/jg.png',imged:'../../static/jg1.png',title:'价格区间'},
				{img:'../../static/jg.png',imged:'../../static/jg1.png',title:'不限'},
				{img:'../../static/sx.png',imged:'../../static/sx.png',title:'筛选'}],
				currone:null,
				tiptypelist:['不限','销量','最新'],
				bx:'',//类型
				top:true,
				cateinfo:'',
				page_index:1,
				list:[],//商品列表
				sales_price:null,//价格排序 1由高到低(true) 2由低到高(false)
				sales_num:null,//销量排序  1由高到低(true) 2由低到高(false)
				childCate:[],//分类列表
				goods_price_min:'',//最低价
				goods_price_max:'',//最高价
				child_cate_id:'',//子类分类的筛选
				is_data:true,//分页
				keyword:'',
			}
		},
		onLoad(option) {
			this.cateinfo =JSON.parse(decodeURIComponent(option.info))
			console.log(this.cateinfo,'this.cateinfo')
			this.getlist()
			uni.setNavigationBarTitle({
			     title: this.cateinfo.name
			    });
		},
		onReachBottom() {
			this.is_data&&this.getlist()
		},
		methods: {
			//筛选
			changeindex(item,index){
				if(this.currone!==index){
					this.currone = index
					if(index==0){
						if(this.sales_price==null){
							this.sales_price = false
						}else{
							this.sales_price = !this.sales_price
						}
						this.getlist()
						//sales_price价格排序 1由高到低(true) 2由低到高(false)
					}
					if(index==1){
						if(this.sales_num==null){
							this.sales_num = false
						}else{
							this.sales_num = !this.sales_num
						}
						this.getlist()
						this.top=true
						// this.$refs.popup.open('top')
					}if(index==2){
						this.top=false
						this.$refs.popups.open('right')
					}
					// console.log(this.top,'top')
				}else{
					if(index==0){
						this.sales_price = !this.sales_price
						this.getlist()
					}
					if(index==1){
						this.sales_num = !this.sales_num
						this.getlist()
					}
					if(index==2){
						this.$refs.popups.open('right')
					}
					this.currone = null
					// this.$refs.popup.close()
				}
				console.log(this.sales_price,1,this.sales_num)
			},
			//类型选择
			changebx(item,index){
				this.bx = index
			},
			tosearch(){
				this.page_index = 1
				this.list = []
				this.is_data = true
				this.sales_price=null
				this.sales_num==null
				this.goods_price_min = ''
				this.goods_price_max = ''
				this.getlist()
			},
			getlist(){
				console.log('getlist')
				this.$http({
					url:'api/Wechat/getGoodsByCateId',
					data:{
						page_index:this.page_index,
						page_size:20,
						cate_id:this.cateinfo.id,
						child_cate_id:this.child_cate_id,
						sales_price:this.sales_price==null?'':this.sales_price==false?2:1,//价格排序1由高到低(true) 2由低到高(false)
						sales_num:this.sales_num==null?'':this.sales_num==false?2:1,//销量排序 1由高到低 2由低到高
						goods_price_min:this.goods_price_min,//最低价
						goods_price_max:this.goods_price_max,//最高价
						keyword:this.keyword,
					}
				}).then(res=>{
					this.childCate = res.data.childCate
					if(res.data.goodsList.length){
						this.list.push(...res.data.goodsList)
						this.page_index++
						return
					}
					this.is_data = false
				})
			},
			filterdata(result){
				this.$refs.popups.close()
				console.log(result,'result')
				this.page_index = 1
				this.list = []
				this.is_data = true
				this.child_cate_id = result.classify.id
				this.goods_price_min = result.goods_price_min
				this.goods_price_max = result.goods_price_max
				this.getlist()
			},
			//跳是商品详情
			togoodsinfo(result){
				uni.navigateTo({
					url:'/pageshop/goodsinfo/goodsinfo?id='+result.id
				})
			},
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.headerbox{
		position: fixed;
		top:0;
		width: 100%;
		height: 222rpx;
		z-index: 999999;
		background-color: #FFF;
		.searchbox {
			width: 100%;
			height: 124rpx;
			display: flex;
			align-items: center;
		
			.search {
				width: 690rpx;
				height: 40rpx;
				padding: 15rpx 0;
				background: #FFFFFF;
				border-radius: 36rpx;
				border: 2rpx solid #F94D29;
				display: flex;
				align-items: center;
				margin: 0 auto;
		
				.scan {
					width: 76rpx;
					text-align: center;
					border-right: solid 2rpx #F2F2F2;
		
					image {
						width: 26rpx;
						height: 26rpx;
					}
				}
		
				.inputbox {
					width: 524rpx;
					height: 40rpx;
					padding: 0 24rpx;
		
					>input {
						width: 100%;
					}
				}
		
				.searchbut {
					width: 120rpx;
					height: 68rpx;
					background: linear-gradient(180deg, #F94D29 0%, #F99529 100%);
					border-radius: 36rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #F7F7F7;
					line-height: 62rpx;
					text-align: center;
				}
			}
		}
		.navtip{
			width: 750rpx;
			height: 98rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
			box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(249,77,41,0.13);
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.tipbox{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				image{
					width: 24rpx;
					height: 28rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
	.tiptype{
		width: 100%;
		padding-top: 222rpx;
		background-color: #FFF;
		.boxitem{
			display: flex;
			flex-wrap: wrap;
			width: 690rpx;
			padding: 40rpx 30rpx;
			.itembox{
				height: 72rpx;
				border-radius: 40rpx;
				border: 2rpx solid #999999;
				line-height: 72rpx;
				width: fit-content;
				padding: 0 50rpx;
				margin-right: 24rpx;
			}
		}
	}
	.rightbox{
		width: 570rpx;
		background: #F7F7F7;
		height: 100%;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

</style>
